<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <com :commsg="msg"> </com>
    </div>
    <script>
        // 根组件
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'这是vm父组件的值'
            },
            // 组件不能直接访问vm身上的数据，如果想访问，需要vm传递过来
            components:{
                    com:{
                         props:['commsg'],
                        template:`
                        <div>
                            <p @click="changeEvent">这里是组件———————— {{this.commsg}}</p>
                        </div>`,
                        data:function(){
                            return{
                                commsg:'这是子组件的值',
                              
                            }
                        },
                        methods:{
                            // changeEvent(){
                            //      this.commsg='根组件中的值改变了';
                            // }
                        }
                    }

            },
        })
    </script>
</body>
</html>